<template>
  <!-- <div>自营订单列表 </div> -->

  <div class="shop">
    <div class="top">
      <el-button size='small'
        type='primary'
        @click="exportPrivateOrder">导出数据</el-button>

      <el-button class='search'
        size='small'
        type='primary'
        @click="searchOrderData">搜索</el-button>

        <el-input class="search input"
        size='small'
        v-model="form.redAmount"
        placeholder="红包抵扣值"
        clearable></el-input>

        <el-select style="width:120px;"
        size='small'
        v-model="form.redType"
        filterable
        class="search"
        clearable
        placeholder="红包抵扣">
        <el-option label=">="
          :value="1"></el-option>
        <!-- <el-option label=">="
          :value="2"></el-option> -->
        <el-option label="<="
          :value="3"></el-option>
        <!-- <el-option label="<="
          :value="4"></el-option> -->
      </el-select>
      <el-input class="search input"
        size='small'
        v-model="form.username"
        placeholder="输入用户手机号查询"
        clearable></el-input>
      <el-input class="search input"
        size='small'
        v-model="form.address_mobile"
        placeholder="输入收货手机号查询"
        clearable></el-input>
      <el-input class="search input"
        size='small'
        v-model="form.order_no"
        placeholder="输入订单号查询"
        clearable></el-input>

      <el-select style="width:120px;"
        size='small'
        v-model="form.status"
        filterable
        class="search"
        placeholder="订单状态">
        <el-option label="全部"
          :value="0">全部</el-option>
        <el-option label="待付款"
          :value="1"></el-option>
        <el-option label="待收货"
          :value="5"></el-option>
        <el-option label="已完成"
          :value="10"></el-option>
        <!-- <el-option label="退款申请中"
          :value="4"></el-option> -->
        <el-option label="已关闭"
          :value="20"></el-option>
      </el-select>

      <el-select style="width:100px;"
        size='small'
        v-model="form.refund_status"
        filterable
        class="search">
        <el-option label='全部'
          :value='0'></el-option>
        <el-option label='退款中'
          :value='5'></el-option>
      </el-select>

      <el-date-picker v-model="form.end_time"
        class="picker"
        type="date"
        style="width:142px"
        size='small'
        value-format="yyyy-MM-dd"
        placeholder="选择结束时间">
      </el-date-picker>
      <span class="guodu">~</span>
      <el-date-picker v-model="form.start_time"
        type="date"
        class="picker"
        style="width:142px"
        value-format="yyyy-MM-dd"
        size='small'
        placeholder="选择开始时间"></el-date-picker>
    </div>

    <el-table :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='订单编号'
        prop='order_no'
        width='140'></el-table-column>
      <!-- <el-table-column label='商品ID'
        prop='product_id'
        width='100'></el-table-column> -->
      <el-table-column label='商品名称'
        prop='title'
        width='210'></el-table-column>
      <el-table-column label='创建时间'
        prop='created_at'
        width='140'></el-table-column>
      <el-table-column label='下单用户'
        prop='username'
        width='120'></el-table-column>
      <el-table-column label='收货手机'
        width='120'>
        <template slot-scope="scope">
          {{scope.row.address_mobile}}
        </template>
      </el-table-column>
      <el-table-column label='商品SKU'
        prop='sku'></el-table-column>
      <el-table-column label='订购数量'>
        <template slot-scope="scope">
          {{scope.row.quantity}}
        </template>
      </el-table-column>
      <el-table-column label='订单原价'>
        <template slot-scope="scope">
          ¥{{scope.row.total_amount}}
        </template>
      </el-table-column>
      <el-table-column label='红包抵扣'>
        <template slot-scope="scope">
          ¥{{scope.row.red_packet_discount_price}}
        </template>
      </el-table-column>
      <el-table-column label='商品付款金额'>
        <template slot-scope="scope">
          ¥{{scope.row.product_total_price}}
        </template>
      </el-table-column>
      <el-table-column label='付款运费'>
        <template slot-scope="scope">
          ¥{{scope.row.freight_amount}}
        </template>
      </el-table-column>
      <el-table-column label='付款总金额'>
        <template slot-scope="scope">
          ¥{{scope.row.actual_amount}}
        </template>
      </el-table-column>
      <el-table-column label='供货成本价'>
        <template slot-scope="scope">
          ¥{{scope.row.supply_price}}
        </template>
      </el-table-column>
      <el-table-column label='订单状态'>
        <template slot-scope="scope">
          <p v-if='scope.row.order_status==1'>待付款</p>
          <p v-if='scope.row.order_status==5'>待收货</p>
          <p v-if='scope.row.order_status==10'>已完成</p>
          <p v-if='scope.row.order_status==15'>已取消</p>
          <p v-if='scope.row.refund_status==5'>退款申请中</p>
          <p v-if='scope.row.order_status==20'>已关闭</p>
        </template>
      </el-table-column>
      <el-table-column label='操作'
        fixed='right'
        width='160'>
        <template slot-scope="scope">
          <el-button size='mini'
            type='primary'
            @click="goOrderDetail(scope.row.order_no)">详情</el-button>
          <el-button size='mini'
            @click="showOrderRemark(scope.row.id)">备注</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    <!--订单备注-->
    <jdialog title="订单备注"
      :visible.sync="isShowOrderremark"
      width="640px">
      <el-form :model="remarkform"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm">
        <!-- <el-form-item label='订单状态备注'
          prop='remark'>
          <el-select style="width:180px;"
            size='small'
            v-model="remarkform.remark"
            filterable
            placeholder="请选择">
            <el-option label="退款申请中"
              :value="0">退款申请中</el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in activities"
              :key="index"
              :color="activity.color">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
          <el-input type="textarea"
            :rows="4"
            class="remarkarea"
            placeholder="请输入备注信息"
            v-model="remarkform.mark">
          </el-input>
        </el-form-item>
      </el-form>

      <div class="align">
        <el-button size='mini' @click="isShowOrderremark = false">取消</el-button>
        <el-button size='mini' type='primary' @click="certainRefundClick">确定</el-button>
      </div>
    </jdialog>
  </div>
</template>

<script>
import { orderSupplySearch,
         orderrefundlogCreate,
         orderrefundloglist } from "@/api/autarky"
import { API_BASE_URL } from "@/config";
export default {
  data () {
    return {
      form: {
        status: 0,
        start_time: '',
        end_time: '',
        refund_status: 0,
        order_no: '',
        username: '',
        cate_id: '',
        product_id: '',
        is_export: '',
        page: 1,
        size: 20,
        redType: '',
        redAmount: '',
        address_mobile: ''
      },
      total: 0,
      tableData: [],

      //显示订单备注
      isShowOrderremark: false,
      remarkform: {
        mark: '',
        order_id: ''
      },
      activities: []

    }
  },
  mounted () {
    this.form.cate_id = this.$route.query.cate_id
    this.form.product_id = this.$route.query.product_id
    this.getorderSupplySearchListData()
  },
  methods: {
    //导出数据
    exportPrivateOrder () {
      this.form.is_export = 1
      this.getorderSupplySearchListData()
    },
    //搜索
    searchOrderData () {
     this.getorderSupplySearchListData()
    },
    pageChange (page) {
      this.form.page = page;
      //申请更多销售日志数据
      this.getorderSupplySearchListData()
    },
    //前往订单详情
    goOrderDetail (order_no) {
      console.log(order_no)
      this.$router.push({ path: './preorderdetail', query: { order_no: order_no } })
    },
    //显示备注
    showOrderRemark (id) {
      this.remarkform.order_id = id
      this.activities = []
      this.isShowOrderremark = true
      this.getorderrefundloglistData(id)
    },
    certainRefundClick(){
      this.getorderrefundlogCreateData()
    },
    //获取自营订单列表数据
    async getorderSupplySearchListData () {
      if (this.form.status == 0) {
        this.form.status = ''
      }
      if (this.form.refund_status == 0) {
        this.form.refund_status = ''
      }
      if(!this.form.product_id){
        this.form.product_id = ''
      }
      if(!this.form.cate_id){
        this.form.cate_id = ''
      }
      if(this.form.start_time == null){
        this.form.start_time =''
      }
      if(this.form.end_time == null){
        this.form.end_time =''
      }
      var url = 'status=' + this.form.status +
        '&start_time=' + this.form.start_time +
        '&end_time=' + this.form.end_time +
        '&refund_status=' + this.form.refund_status +
        '&order_no=' + this.form.order_no +
        '&username=' + this.form.username +
        '&cate_id=' + this.form.cate_id +
        '&product_id=' + this.form.product_id +
        '&redType=' + this.form.redType +
        '&redAmount=' + this.form.redAmount +
        '&address_mobile=' + this.form.address_mobile +
        '&is_export=' + this.form.is_export+
        '&page='+this.form.page

      let res = await orderSupplySearch(url)
       
      if (res.code === 10000) {
         if(this.form.is_export == 1) {
        this.form.is_export = ''
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
        return;
      }else{
        this.tableData = res.data.data
        this.total = res.data.total
      }
        
      }else{
        this.form.is_export = ''
        this.$message.error(res.message)
      }
    },

    //订单日志创建
    async getorderrefundlogCreateData(){
      let res  = await orderrefundlogCreate(this.remarkform)
      if(res.code === 10000){
        this.$message.success(res.message)
        this.isShowOrderremark = false
      }else{
        this.$message.error(res.message)
      }
    },
    //订单日志列表
    async getorderrefundloglistData(id){
      let res = await orderrefundloglist(id)
      if(res.code === 10000){
        if(res.data.length !=0){
           res.data.map(obj => {
             this.activities.push({'content':obj.mark+'      '+obj.created_at,'color':'#f4222d'})
           })
        }
      }else{
        this.$message.error(res.message)
      }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>
<style lang="scss" scoped>
.shop {
  padding: 20px;
  .top {
    margin-bottom: 20px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 140px;
    }
    .picker {
      float: right;
    }
    .guodu {
      float: right;
      line-height: 30px;
    }
  }
  .align{
    text-align:center;
  }
  .pagination {
    float: right;
    margin-top: 12px;
  }
  .demo-ruleForm {
    padding: 20px;
    .remarkarea {
      padding-right: 30px;
      margin-top: 20px;
    }
  }
}
</style>